<template>
    <view class="page">
        <public-module></public-module>
        <!-- #ifdef MP-WEIXIN -->
        <public-module></public-module>
        <!-- #endif -->
        <u-navbar title="我的" :border-bottom="false" :is-back="false" :back-icon-color="'#ffffff'"
            :title-color="'#ffffff'" :background="background"></u-navbar>
        <view class="my-top">
            <!-- 用户信息 -->
            <view class="user-info" v-if="userInfo.id">
                <view class="portrait" @click="onUserInfo">
                    <image :src="userInfo.avatar"></image>
                </view>
                <view class="info">
                    <view class="nickname">
                        <text>{{userInfo.nicename}}</text>
                    </view>
                    <view class="rank">
                        <!-- <image src="/static/rank.png"></image> -->
                        <text>{{phoneNum}}</text>
                        <text>积分 {{userInfo.points_remain}}</text>
                        <text>金币 {{userInfo.coin_remain}}</text>
                    </view>
                </view>

                <view class="setting-mess">
                    <view class="setting" @click="onChat">
                        <u-icon name="chat" color="#fff" size='20px'></u-icon>
                    </view>
                    <view class="setting" @click="onSetting">
                        <text class="iconfont icon-setting"></text>
                    </view>
                </view>
            </view>
            <view class="user-info" @click="openLogin" v-else>
                <view class="portrait">
                    <image :src="$imgUrl+'my/head.png'"></image>
                </view>
                <view class="info">
                    <view class="nickname">
                        <text>登录/注册</text>
                    </view>
                </view>
            </view>
            <!-- 关注区 -->
        </view>
        <!-- 服务订单 全部/未接单/已接单/已完成/已取消 -->
        <!-- <text class="num">22</text> -->

        <!-- <view class="order-info  order-info1">
            <view class="box">
                <view class="h2">服务订单</view>
            </view>
            <view class="boxli">
                <view class="list" @click="onServiceOrder('0')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.service_orders.unaccept_number" absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/confirm.png'" mode="heightFix"></image>
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>未接单</text>
                    </view>
                </view>
                <view class="list" @click="onServiceOrder('1')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.service_orders.received_number" absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/xin.png'" mode="heightFix"></image>
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>已接单</text>
                    </view>
                </view>
                <view class="list" @click="onServiceOrder('-1')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.service_orders.canceled_number" absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/wallet.png'" mode="heightFix"></image>
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>已取消</text>
                    </view>
                </view>
                <view class="list" @click="onServiceOrder('2')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.service_orders.completed_number" absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/money.png'" mode="heightFix"></image>                            
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>已完成</text>
                    </view>
                </view>
                <view class="list" @click="onServiceOrder('')">
                    <view class="icon">
                        <image :src="$imgUrl+'my/order.png'" mode="heightFix"></image>
                    </view>
                    <view class="title">
                        <text>全部订单</text>
                    </view>
                </view> 
            </view>
        </view> -->
        <!-- 订单信息 v-if="appName == '蔚蓝至善优选' "-->
        <view class="order-info" >
            <view class="box">
                <view class="h2">商城订单</view>
            </view>
            <view class="boxli">
                <view class="list" @click="onSkipOrder('0')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.awaiting_number"
                        absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/wallet.png'" mode="heightFix"></image>
                            <!-- inverted="true" <text class="num" v-if="userInfo.shop_orders.awaiting_number != 0">{{userInfo.shop_orders.awaiting_number}}</text> -->
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>待付款</text>
                    </view>
                </view>
                <view class="list" @click="onSkipOrder('1')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.shipped_number"
                        absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/confirm.png'" mode="heightFix"></image>
                            <!-- <text class="num">22</text> -->
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>待发货</text>
                    </view>
                </view>
                <view class="list" @click="onSkipOrder('2')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.received_number"
                        absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/car.png'" mode="heightFix"></image>
                            <!-- <text class="num">22</text> -->
                        </view>
                    </uni-badge>
                    <view class="title">
                        <text>待收货</text>
                    </view>
                </view>
                <view class="list" @click="onSkipOrder('3')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.evaluated_number"
                        absolute="rightTop" size="small">
                        <view class="icon">
                            <image :src="$imgUrl+'my/evaluate.png'" mode="heightFix"></image>
                            <!-- <image :src="$imgUrl+'my/money.png'" mode="heightFix"></image> -->
                            <!-- <text class="num">22</text> -->
                        </view>
                    </uni-badge>
                    <view class="title">
                        <!-- <text>退款/售后</text> -->
                        <text>待评价</text>
                    </view>
                </view>
                <view class="list" @click="onSkipOrder('4')">
                    <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.completed_number"
                        absolute="rightTop" size="small">
                        <view class="icon">
                            <!-- <image :src="$imgUrl+'my/evaluate.png'" mode="heightFix"></image> -->
                            <image :src="$imgUrl+'my/money.png'" mode="heightFix"></image>
                            <!-- <text class="num">22</text> -->
                        </view>
                    </uni-badge>
                    <view class="title">
                        <!-- <text>退款/售后</text> -->
                        <text>已完成</text>
                    </view>
                </view>
                <!-- <view class="list" @click="onSkipOrder('')">
                    <view class="icon">
                        <image :src="$imgUrl+'my/wallet.png'" mode="heightFix"></image>
                    </view>
                    <view class="title">
                        <text>全部订单</text>
                    </view>
                </view> -->
            </view>
            <!-- <view class="obligation">
                <view class="obli">
                    <view class="boxl">
                        <image :src="$imgUrl+'logo.png'" mode="heightFix"></image>
                        <view class="txt">
                            <view class="h3">等待付款</view>
                            <view class="time">
                                <text>剩余时间</text>
                                <uni-countdown :show-day="false" :hour="1" :minute="12" :second="40" />
                            </view>
                        </view>
                    </view>
                    <view class="boxr">
                        <button class="mini-btn" type="default" size="mini">去付款</button>
                    </view>
                </view>
            </view> -->
        </view>
        <!-- 电影订单 && this.isLogin  -->
        <!--   <view class="order-info" v-if="appName != '蔚蓝至善优选' ">
            <view class="box" style="margin-bottom: 10rpx;margin-top: 10rpx;">
                <view class="h2">我的订单</view>
            </view>
            <view class="boxli">
                <view class="list" @click="onCinemaOrder('0')">
                    <view class="icon0">
                        <image :src="$imgUrl+'orders_movie.png'" mode="heightFix"></image>
                        inverted="true" :text="userInfo.shop_orders.awaiting_number" <text class="num" v-if="userInfo.shop_orders.awaiting_number != 0">{{userInfo.shop_orders.awaiting_number}}</text>
                    </view>
                    <view class="title">
                        <text>电影订单</text>
                    </view>
                </view>
                <view class="list" @click="onCinemaOrder('1')">
                    <view class="icon0">
                        <image :src="$imgUrl+'orders_goods.png'" mode="heightFix"></image>
                        <text class="num">22</text> :text="userInfo.shop_orders.shipped_number"
                    </view>
                    <view class="title">
                        <text>商品订单</text>
                    </view>
                </view>
                <view class="list" @click="onCinemaOrder('2')">
                    <view class="icon0">
                        <image :src="$imgUrl+'orders_service.png'" mode="heightFix"></image>
                        <image :src="$imgUrl+'my/money.png'" mode="heightFix"></image>
                        <text class="num">22</text> :text="userInfo.shop_orders.evaluated_number"
                    </view>
                    <view class="title">
                        <text>退款/售后</text>
                        <text>服务订单</text>
                    </view>
                </view> 
            </view>

        </view> -->
        <!-- <view class="list" @click="onCinemaOrder('3')">
            <uni-badge class="uni-badge-left-margin" :text="userInfo.shop_orders.evaluated_number" absolute="rightTop" size="small">
                <view class="icon">
                    <image :src="$imgUrl+'images/moive-my-quxiao.png'" mode="heightFix"></image>
                </view>
            </uni-badge>
            <view class="title">
                <text>已完成</text>
            </view>
        </view>
        <view class="list" @click="onCinemaOrder('-1')">
            <view class="icon">
                <image :src="$imgUrl+'my/order.png'" mode="heightFix"></image>
            </view>
            <view class="title">
                <text>已取消</text>
            </view>
        </view> -->

        <!-- VIP会员，购物车 -->
        <!-- <view class="vip-shopping">
            <view class="list" @click="onMmeberVip">
                <view class="title">
                    <image :src="$imgUrl+'my/vip.png'" mode="widthFix"></image>
                    <view class="txt">
                        <text class="p1">VIP会员</text>
                        <text class="p2 fa6e2f">新用户充值享优惠</text>
                    </view>
                </view>
            </view>
            <navigator class="list" url="/pages/mall/car" open-type="navigate" hover-class="other-navigator-hover">
                <view class="title">
                    <image :src="$imgUrl+'my/shopping.png'" mode="widthFix"></image>
                    <view class="txt">
                        <text class="p1">购物车</text>
                        <text class="p2">去看看 > </text>
                    </view>
                </view>
            </navigator>
        </view> -->
        <!-- 健康档案，紧急联系人，智能硬件，我的二维码 -->
        <view class="setting-list">
            <!-- <view class="list" @click="goPage('health')">
                <view class="title">
                    <image :src="$imgUrl+'my/list.png'" mode="widthFix"></image>
                    <text>健康档案</text>
                </view>
                <view class="more-content">
                    <text class="content">详细信息</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view> -->
           <!-- <view class="list" @click="goPage('contact')">
                <view class="title">
                    <image :src="$imgUrl+'my/contacts.png'" mode="widthFix"></image>
                    <text>紧急联系人</text>
                </view>
                <view class="more-content">
                    <text class="content">详细信息</text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view> -->
            <!-- <view class="list" @click="goPage('withdrawal')">
                <view class="title">
                    <image :src="$imgUrl+'my/contacts.png'" mode="widthFix"></image>
                    <text>分销员提现</text>
                </view>
                <view class="more-content">
                    <text class="content"></text>
                    <text class="iconfont icon-more more"></text>
                </view>
            </view> -->
            <!-- <view class="list" @click="onSetting('invoice')">
                <view class="title">
                    <image :src="$imgUrl+'my/hardware.png'" mode="widthFix"></image>
                    <text>智能硬件</text>
                </view>
                <view class="more-content">
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list" @click="onSetting('vip')">
                <view class="title">
                    <image :src="$imgUrl+'my/ewm.png'" mode="widthFix"></image>
                    <text>我的二维码</text>
                </view>
                <view class="more-content">
                    <text class="iconfont icon-more more"></text>
                </view>
            </view> -->
        </view>
        <!-- 优惠券， 签到 -->
        <view class="coupon-sign">
            <view class="list">
                <view class="item coupon" @click="goPage('coupon')">
                    <view class="txt txt1">
                        <text class="p1">优惠券</text>
                        <text class="p2"
                            v-if="userInfo.coupon_count">{{userInfo.coupon_count ? userInfo.coupon_count : '' }}张可用</text>
                    </view>
                </view>
                <view class="item sign" @click="goPage('SignIn')">
                    <view class="txt txt2">
                        <text class="p1">签到领福利</text>
                        <text class="p2" v-if="userInfo.is_sign==1">今日已签到</text>
                        <text class="p2" v-if="userInfo.is_sign==0">今日未签到</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="setting-list">
            <view class="list" @click="onAddress">
                <view class="title">
                    <text>收货地址</text>
                </view>
                <view class="more-content">
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
            <view class="list" @click="onCollect('content')">
                <view class="title">
                    <text>我的收藏</text>
                </view>
                <view class="more-content">
                    <text class="iconfont icon-more more"></text>
                </view>
            </view>
           <!-- <template v-if="isLogin"> -->
                <view class="list" @click="onServer('feedback')">
                    <view class="title">
                        <text>意见反馈</text>
                    </view>
                    <view class="more-content">
                        <text class="iconfont icon-more more"></text>
                    </view>
                </view>
                <view v-show="this.isLogin" class="list" @click="logout()">
                    <view class="title">
                        <text>注销账号</text>
                    </view>
                    <view class="more-content">
                        <text class="iconfont icon-more more"></text>
                    </view>
                </view>
          <!--  </template> -->
        </view>

        <!-- 提示框 -->
        <u-modal v-model="show" show-cancel-button :content="content" @confirm="confirm"></u-modal>
        <TabBar :current="3" v-if="isLogin"></TabBar>
        <TabBar :current="3" v-else></TabBar>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';

    export default {
        components: {},
        data() {
            return {
                scrollTop: 0,
                isHotline: false,
                isLogin: uni.getStorageSync('token') ? true : false,
                phoneNum:'',
                // phoneNum: uni.getStorageSync('mobile')? uni.getStorageSync('mobile') : userInfo.mobile,
                $imgUrl: this.$imgUrl,
                isAuthor: uni.getStorageSync('authorList') ? true : false,
                userInfo: {},
                show: false,
                content: '是否要注销账号?若您在15日之内再次登录将取消注销！',
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #3f99ab, #2e996f)'
                },
                huanxin: {},
                appName: '',
            };
        },
        onReady() {},
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        watch: {
            "isLogin": {
                handler(val) {
                    console.log(val, "val")
                    if (val) {
                        this.getList()
                    }
                }
            }
        },
        onShow() {
            uni.getSystemInfo({
                success: function(e) {
                    const appName = e.appName;
                    uni.setStorageSync('appName', appName)
                }
            })
            this.appName = uni.getStorageSync("appName")
            this.isLogin = uni.getStorageSync('token') ? true : false,
                console.log(this.isLogin, "this.isLogin")
            if (this.isLogin) {
                this.getList()
                this.huanxin = JSON.parse(uni.getStorageSync("huanxin"))
                console.log(this.huanxin, '环信数据')
                if (this.huanxin && this.huanxin.length > 0) {
                    this.loginHx()
                }
            }
        },
        onLoad() {
            // this.hidePhone();
            // this.appName = uni.getStorageSync("appName")
            console.log(uni.getStorageSync('token'), "this.appName")
        },
        methods: {
            loginHx() {
                uni.WebIM.conn.open({
                    user: this.huanxin.username,
                    pwd: this.huanxin.password,
                    appkey: uni.WebIM.config.appkey,
                })
                console.log("账号：", this.huanxin.username)
                console.log("密码：", this.huanxin.password)
                console.log(">>>>>登录环信", uni.WebIM)
                uni.setStorage({
                    key: "myUsername",
                    data: this.huanxin.username,
                })
                console.log(uni.getStorageSync("myUsername"), 999)
                // uni.WebIM.conn.open({
                //     user: "test1",
                //     pwd: "test1",
                //     appkey: uni.WebIM.config.appkey,
                // this.huanxin.appkey
                // })
                // console.log(">>>>>登录环信", uni.WebIM)
                // uni.setStorage({
                //     key: "myUsername",
                //     data: "test1",
                // })
            },
            ...mapMutations(['setLoginPopupShow', 'setShowWxLogin']),
            getList() {
                this.$store.dispatch('GetInfo').then(res => {
                    console.log(res, 'resssssssss')
                    this.userInfo = res
                    this.phoneNum = res.mobile
                    this.hidePhone();
                    uni.setStorageSync('userInfo', JSON.stringify(res))
                    this.isLogin = true
                }).catch(() => {})
            },
            //隐藏部分手机号
            hidePhone() {
                let that = this
                let number = this.phoneNum; //获取到手机号码字段
                console.log('手机号', this.phoneNum)
                let mphone = number.substring(0, 3) + '******' + number.substring(9);
                that.phoneNum = mphone
            },
            /**
             * 头像点击
             */
            onUserInfo() {
                uni.navigateTo({
                    url: '/pagesA/setting/information'
                })
            },
            /**
             * 地址点击
             */
            onAddress() {
                this.judgeLogin(() => {
                    uni.navigateTo({
                        url: '/pagesA/my/addressList',
                    })
                })
            },
            /**
             * 关注跳转
             */
            onCollect(type) {
                this.judgeLogin(() => {
                    switch (type) {
                        case 'goods':
                            uni.navigateTo({
                                url: '/pagesA/my/goodsOn'
                            })
                            break;
                        case 'content':
                            uni.navigateTo({
                                url: '/pagesA/my/favorite'
                            })
                            break;
                        case 'record':
                            uni.navigateTo({
                                url: '/pagesA/my/browsingHistory'
                            })
                            break;
                    }
                })
            },
            /**
             * 服务订单
             */
            onServiceOrder(type) {
                this.judgeLogin(() => {
                    uni.navigateTo({
                        url: '/pagesA/my/serviceOrders?type=' + type,
                    })
                });
            },
            /**
             * 我的订单
             */
            onSkipOrder(type) {
                this.judgeLogin(() => {
                    if (type === 5) {
                        uni.navigateTo({
                            url: '/pagesA/my/afterSalesOrder',
                        })
                        return;
                    }
                    uni.navigateTo({
                        url: '/pagesA/my/myOrderList?type=' + type,
                    })
                })
            },
            onCinemaOrder(type) {
                if (type == '0') {
                    uni.navigateTo({
                        url: '/pagesB/movie/my-ticket',
                    })
                } else if (type == '1') {
                    uni.navigateTo({
                        url: '/pagesA/my/myOrderList',
                    })
                } else if (type == '2') {
                    uni.navigateTo({
                        url: '/pagesA/my/serviceOrders',
                    })
                    return;
                }
            },
            /**
             * 跳转点击
             */
            goPage(type) {
                this.judgeLogin(() => {
                    switch (type) {
                        case 'integral':
                            uni.navigateTo({
                                url: '/pagesA/my/integralDetails',
                            })
                            break;
                        case 'coupon':
                            uni.navigateTo({
                                url: '/pagesA/my/myCoupon',
                            })
                            break;
                        case 'wallet':
                            uni.navigateTo({
                                url: '/pagesA/my/myWallet',
                            })
                            break;
                        case 'SignIn':
                            uni.navigateTo({
                                url: '/pagesA/my/signIn',
                            })
                            break;
                        case 'payment':
                            uni.navigateTo({
                                url: '/pagesA/my/payCode',
                            })
                            break;
                        case 'turntable':
                            uni.navigateTo({
                                url: '/pagesA/my/turntable',
                            })
                            break;
                        case 'health':
                            uni.navigateTo({
                                url: '/pagesA/my/healthRecords',
                            })
                            break;
                        case 'contact':
                            uni.navigateTo({
                                url: '/pagesA/my/contact',
                            })
                            break;
                        case 'withdrawal':
                            uni.navigateTo({
                                url: '/pagesB/withdrawal/index',
                            })
                            break;
                    }
                })

            },
            /**
             * 我的服务点击
             */
            onServer(type) {
                this.judgeLogin(() => {
                    switch (type) {
                        case 'feedback':
                            uni.navigateTo({
                                url: '/pagesA/my/feedback'
                            })
                            break;
                        case 'serve':
                            this.isHotline = true;
                            break;
                    }
                })
            },
            /**
             * 设置点击
             */
            onSetting() {
                uni.navigateTo({
                    url: '/pagesA/setting/Setting'
                })
            },
            /**
             * 聊天点击
             */
            onChat() {
                console.log(">>>>>>>>>执行进入chat页面")
                // var nameList = {
                //     myName: uni.getStorageSync("myUsername"),
                //     your: 'busin_1_staff_23',
                //     type: 0,
                //     match_id: "G7905344441775323672"
                // }
                // uni.navigateTo({
                //     url: "/pagesA/chatroom/chatroom?username=" + JSON.stringify(nameList),
                // });
                // 企业微信
                if (!uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: "/pages/login/index"
                    })
                } else {
                    wx.openCustomerServiceChat({
                        extInfo: {
                            url: 'https://work.weixin.qq.com/kfid/kfc957bfe40bb17d6b8' //客服ID
                        },
                        corpId: "ww4d9a453b47317369", //企业微信ID
                        success(res) {
                            console.log(res, 789)
                        }
                    })
                }
            },
            /**
             * 消息点击
             */
            onMessage() {
                uni.navigateTo({
                    url: '/pages/message/message'
                })
            },
            /**
             * 会员点击
             */
            onMmeberVip() {
                uni.navigateTo({
                    url: '/pagesA/my/membersOpened',
                })
            },
            /**
             * 跳转点击
             * @param {String} type 跳转类型
             */
            onSkip(type) {
                switch (type) {
                    case 'goods':
                        uni.navigateTo({
                            url: '/pagesA/mall/goodsDetails',
                            animationType: 'zoom-fade-out',
                            animationDuration: 200
                        })
                        break;
                }
            },
            /**
             * 
             * 登录
             */
            openLogin() {
                // this.judgeLogin()
                uni.navigateTo({
                    url: '/pagesA/login/wxLogin'
                })
            },

            logout() {
                this.judgeLogin(() => {
                    this.show = true
                })
            },
            confirm() {
                this.show = false
                this.$store.dispatch('LogOut');
                this.$message("注销成功")
                setTimeout(() => {
                    // #ifdef APP-PLUS || H5
                    uni.reLaunch({
                        url: '/pagesA/login/index'
                    });
                    // #endif
                    // #ifdef MP-WEIXIN
                    uni.reLaunch({
                        url: '/pagesA/login/wxLogin'
                    });
                    // #endif
                }, 500);
            },
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        width: 100%;
        // height: 100%;
        padding-bottom: 150rpx;
        background-color: #f6f6f6;
    }

    .my-top {
        position: relative;
        width: 100%;
        //   height: 420rpx;
        height: 362rpx;
        /* #ifdef APP-PLUS */
        height: 460rpx;
        /* #endif */
        /* #ifdef MP */
        height: 210rpx;
        /* #endif */
        background: linear-gradient(to bottom left, #2e996e, #3f99ab);
        border-radius: 0% 0% 15% 15%;
        overflow: hidden;

        /* 用户信息 */
        .user-info {
            display: flex;
            align-items: center;
            padding: 0 4%;
            height: 120rpx;
            margin-top: 30rpx;

            .portrait {
                width: 120rpx;
                height: 120rpx;
                box-sizing: border-box;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                    border: 4rpx solid #ffffff;
                    box-sizing: border-box;
                }
            }

            .info {
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 65%;
                height: 100%;
                margin-left: 20rpx;

                .nickname {
                    width: 100%;
                    padding: 10rpx 0;

                    text {
                        color: #ffffff;
                        font-size: 28rpx;
                    }
                }

                .rank {
                    display: flex;
                    align-items: center;
                    // width: 120rpx;
                    height: 30rpx;
                    // padding: 0 20rpx 0 0;
                    // border: 2rpx solid #f0ad4e;
                    // border-radius: 30rpx;

                    // image {
                    //   width: 24rpx;
                    //   height: 24rpx;
                    // }

                    text {
                        font-size: 24rpx;
                        color: #ffffff;
                        margin-right: 20rpx;
                    }
                }
            }

            .setting-mess {
                display: flex;
                align-items: center;
                height: 100%;
                // margin-right: 20rpx;

                .setting {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 60rpx;
                    height: 100%;

                    text {
                        color: #ffffff;
                        font-size: 38rpx;
                    }
                }

                .mess {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 80rpx;
                    height: 100%;

                    text {
                        color: #ffffff;
                        font-size: 38rpx;
                    }
                }

                .active {
                    color: #333333 !important;
                }
            }
        }

        //   服务码
        .code {
            display: block;
            font-size: 24rpx;
            color: #ffffff;
            padding: 53rpx 0 0 30rpx;
        }

        /* 关注区 */
        .focus-area {
            display: flex;
            align-items: center;
            width: 100%;
            height: 120rpx;

            .list {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 33%;
                height: 100%;

                .num {
                    display: flex;
                    align-items: center;

                    text {
                        color: #ffffff;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                }

                .title {
                    display: flex;
                    align-items: center;
                    margin-top: 5rpx;

                    text {
                        color: #ffffff;
                        font-size: 24rpx;
                    }
                }
            }
        }

        /* vip */
        .vip-info {
            position: absolute;
            left: 50%;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 4%;
            width: 90%;
            height: 80rpx;
            background-color: #464c5b;
            transform: translate(-50%, 0);
            border-radius: 10rpx 10rpx 0 0;

            .vip {
                position: relative;
                display: flex;
                align-items: center;
                width: 20%;
                height: 60rpx;

                text {
                    color: #ffe678;
                    font-size: 26rpx;
                }

                .line {
                    position: absolute;
                    right: 0;
                    top: 40%;
                    width: 2rpx;
                    height: 20rpx;
                    background-color: #ffe678;
                }
            }

            .vip-explain {
                display: flex;
                align-items: center;
                height: 60rpx;
                margin: 0 10rpx;

                text {
                    color: #ffe678;
                    font-size: 24rpx;
                }
            }

            .vip-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 140rpx;
                height: 40rpx;
                background-color: #ffe678;
                border-radius: 30rpx;
                margin-top: 10rpx;

                text {
                    font-size: 24rpx;
                    color: #464c5b;
                }
            }
        }
    }

    /* 订单信息 */
    .order-info {
        width: 94%;
        border-radius: 20rpx;
        background-color: #ffffff;
        margin: 20rpx auto;
        padding: 20rpx 0;

        .box {
            width: 90%;
            margin: 0 auto;

            .h2 {
                font-size: 28rpx;
                font-weight: 600;
            }
        }

        .boxli {
            display: flex;
            height: 160rpx;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 20%;
                height: 100%;

                .icon {
                    position: relative;
                    display: flex;
                    align-items: center;

                    image {
                        height: 36rpx;
                    }

                    .num {
                        position: absolute;
                        right: -20rpx;
                        top: -20rpx;
                        padding: 4rpx;
                        font-size: 18rpx;
                        color: #fe3b0f;
                        border: 2rpx solid #fe3b0f;
                        border-radius: 100%;
                        background-color: #ffffff;
                    }
                }

                .icon0 {
                    position: relative;
                    display: flex;
                    align-items: center;

                    image {
                        height: 60rpx;
                    }

                    .num {
                        position: absolute;
                        right: -20rpx;
                        top: -20rpx;
                        padding: 4rpx;
                        font-size: 18rpx;
                        color: #fe3b0f;
                        border: 2rpx solid #fe3b0f;
                        border-radius: 100%;
                        background-color: #ffffff;
                    }
                }

                .title {
                    display: flex;
                    align-items: center;
                    margin-top: 20rpx;

                    text {
                        color: #333333;
                        font-size: 24rpx;
                    }
                }
            }
        }

        .obligation {
            width: 96%;
            margin: 0 auto;
            background-color: #f5f5f5;
            padding: 30rpx 20rpx;
            border-radius: 10rpx;

            .obli {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .boxl {
                    display: flex;

                    image {
                        height: 80rpx;
                    }

                    .txt {
                        padding-left: 40rpx;

                        .h3 {
                            font-size: 26rpx;
                            font-weight: 600;
                            color: #2f2f2f;
                            padding-bottom: 6rpx;
                        }

                        .time {
                            display: flex;

                            text {
                                font-size: 24rpx;
                                color: #727272;
                                line-height: 50rpx;
                            }

                            /deep/.uni-countdown__number {
                                span {
                                    color: $price-clor;
                                    font-size: 24rpx;
                                    line-height: 50rpx;
                                }
                            }
                        }
                    }
                }

                .boxr {
                    button {
                        width: 120rpx;
                        padding: 0;
                        height: 60rpx;
                        border-radius: 20rpx;
                        border: solid 1px #e95404;
                        font-size: 22rpx;
                        line-height: 56rpx;
                        color: #e95404;
                    }
                }
            }
        }
    }

    .order-info1 {
        .boxli {
            .list {
                &:last-child {
                    background: url("https://yl.weilankangyang.com/static/mini_program/my/div.png") no-repeat left center;
                    background-size: auto 83rpx;
                }
            }
        }
    }

    // VIP会员，购物车
    .vip-shopping {
        // display: flex;
        // justify-content: space-between;
        width: 94%;
        height: 128rpx;
        margin: 20rpx auto;

        .list {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .title {
                width: 94%;
                height: 120rpx;
                display: flex;
                align-items: center;

                image {
                    width: 70rpx;
                }

                .txt {
                    padding-left: 20rpx;
                    width: 88%;
                    display: flex;
                    justify-content: space-between;

                    text {
                        display: block;
                    }

                    .p1 {
                        color: #1a1a1a;
                        font-size: 28rpx;
                        font-weight: 600;
                    }

                    .p2 {
                        padding-top: 4rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }

                    .fa6e2f {
                        color: #fa6e2f;
                    }
                }
            }

            .mess {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                text {
                    color: #c0c0c0;
                    font-size: 26rpx;
                }
            }
        }
    }

    // 健康档案，紧急联系人，智能硬件，我的二维码
    .setting-list {
        padding: 0 4%;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 20rpx auto;

        .list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 100rpx;
            border-bottom: 2rpx solid #f6f6f6;

            .title {
                display: flex;
                align-items: center;

                image {
                    width: 36rpx;
                    margin-right: 30rpx;
                }

                text {
                    font-size: 28rpx;
                    color: #222222;
                }
            }

            .more-content {
                display: flex;
                align-items: center;

                .content {
                    font-size: 28rpx;
                    color: #959595;
                }

                .more {
                    font-size: 24rpx;
                    color: #959595;
                    margin-left: 20rpx;
                }
            }
        }
    }

    // 优惠券， 签到
    .coupon-sign {
        padding: 20rpx 0;

        .list {
            width: 690rpx;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .item {
                width: 321rpx;
                height: 159rpx;
                box-shadow: 6rpx 3rpx 21rpx 3rpx rgba(247, 104, 150, 0.26);
                border-radius: 11rpx;

                .txt {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    height: 100%;

                    .p1 {
                        font-size: 35rpx;
                        color: #ffffff;
                        padding-bottom: 8rpx;
                    }

                    .p2 {
                        font-size: 24rpx;
                        color: #919191;
                    }
                }

                .txt1 {
                    padding-left: 130rpx;
                }

                .txt2 {
                    padding-left: 32rpx;
                }
            }

            .coupon {
                background: url("https://yl.weilankangyang.com/static/mini_program/my/coupon.png") no-repeat center center;
                background-size: cover;
            }

            .sign {
                background: url("https://yl.weilankangyang.com/static/mini_program/my/sign.png") no-repeat center center;
                background-size: cover;
            }
        }
    }

    /* 钱包 */
    .wallet-info {
        display: flex;
        width: 94%;
        height: 200rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
        margin: 20rpx auto;

        .list {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 25%;
            height: 100%;

            .icon {
                position: relative;
                display: flex;
                align-items: center;

                .iconfont {
                    font-size: 38rpx;
                    color: $base;
                }

                .number {
                    font-size: 28rpx;
                    color: #212121;
                    font-weight: bold;
                }
            }

            .title {
                display: flex;
                align-items: center;
                margin-top: 10rpx;

                text {
                    color: #333333;
                    font-size: 24rpx;
                }
            }
        }
    }

    /* 签到，付款码 */
    .integral-payment {
        display: flex;
        justify-content: space-between;
        width: 94%;
        height: 180rpx;
        margin: 20rpx auto;

        .list {
            width: 48%;
            height: 100%;
            background-color: #ffffff;
            border-radius: 20rpx;

            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 120rpx;

                .iconfont {
                    font-size: 48rpx;
                    margin-right: 10rpx;
                    font-weight: normal;
                }

                text {
                    color: #212121;
                    font-size: 28rpx;
                    font-weight: bold;
                }
            }

            .mess {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                text {
                    color: #c0c0c0;
                    font-size: 26rpx;
                }
            }
        }
    }

    /* 我的服务 */
    .my-service {
        width: 94%;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 20rpx auto;

        .title {
            display: flex;
            align-items: center;
            padding: 0 4%;
            height: 80rpx;

            text {
                font-size: 28rpx;
                font-weight: bold;
                color: #212121;
            }
        }

        .service-list {
            display: flex;
            flex-wrap: wrap;
            padding: 0 4%;

            .list {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 25%;
                height: 140rpx;

                .thumb {
                    width: 40rpx;
                    height: 40rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .name {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 80rpx;

                    text {
                        color: #212121;
                        font-size: 24rpx;
                    }
                }
            }
        }
    }

    /* 为你推荐 */
    .recommend-info {
        width: 100%;
        background-color: #f2f2f2;

        .recommend-title {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100rpx;

            .title {
                display: flex;
                align-items: center;

                image {
                    width: 416rpx;
                    height: 40rpx;
                }
            }
        }

        .goods-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 30rpx;

            .list {
                width: 49%;
                height: 540rpx;
                margin-bottom: 20rpx;
                background-color: #ffffff;
                border-radius: 10rpx;
                overflow: hidden;

                .pictrue {
                    display: flex;
                    justify-content: center;
                    width: 100%;

                    image {
                        height: 350rpx;
                    }
                }

                .title-tag {
                    // display: flex;
                    height: 100rpx;
                    padding: 20rpx;

                    .tag {
                        float: left;
                        margin-right: 10rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        white-space: normal;
                        font-size: 26rpx;
                        line-height: 40rpx;

                        text {
                            font-size: 24rpx;
                            color: #ffffff;
                            padding: 4rpx 16rpx;
                            background: linear-gradient(to right, $base, $change-clor);
                            border-radius: 6rpx;
                            margin-right: 10rpx;
                        }
                    }
                }

                .price-info {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 20rpx;
                    height: 80rpx;

                    .user-price {
                        display: flex;
                        align-items: center;

                        text {
                            color: $price-clor;
                        }

                        .min {
                            font-size: 24rpx;
                        }

                        .max {
                            font-size: 32rpx;
                        }
                    }

                    .vip-price {
                        display: flex;
                        align-items: center;

                        image {
                            width: 26rpx;
                            height: 26rpx;
                            margin-right: 10rpx;
                        }

                        text {
                            color: #fcb735;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
    }

    /* 客服热线弹窗 */
    .serve-hotline {
        .cu-dialog {
            width: 100%;
            border-radius: 20rpx 20rpx 0 0 !important;

            .contact-list {
                width: 100%;

                .list {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100rpx;

                    text {
                        color: #222222;
                        font-size: 32rpx;
                    }
                }
            }
        }
    }

    /deep/.page-total {
        z-index: 999;
    }
</style>